<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <title>70-简约登录页</title>
</head>
<style>
	* {
	    margin: 0;
	    padding: 0;
	}
	
	body {
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    background-color: #0e92b3;
	}
	
	.form {
	    width: 300px;
	    background-color: rgb(41, 45, 62);
	    color: #fff;
	    border-radius: 2px;
	    padding: 50px 80px 80px;
	    border-radius: 10px;
	    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
	}
	
	.header {
	    text-align: center;
	    font-size: 35px;
	    text-transform: uppercase;
	    line-height: 100px;
	}
	
	.main .inpbox input {
	    background-color: rgb(41, 45, 62);
	    border: 0;
	    width: 100%;
	    text-align: center;
	    font-size: 15px;
	    color: #fff;
	    outline: none;
	}
	
	.main .inpbox {
	    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
	    background-size: 400%;
	    width: 100%;
	    height: 50px;
	    margin-bottom: 20px;
	    border-radius: 30px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    transition: all 1s;
	}
	
	.main .inpbox input {
	    height: calc(100% - 4px);
	    width: calc(100% - 6px);
	    border-radius: 30px;
	}
	
	.main .inpbox:has(input:focus) {
	    animation: animate 5s linear infinite;
	    transform: scale(1.2);
	}
	
	@keyframes animate {
	    0% {
	        background-position: 0 0;
	    }
	
	    100% {
	        background-position: 400% 0;
	    }
	}
	
	.action {
	    display: flex;
	    justify-content: center;
	}
	
	.action .btn {
	    width: 60%;
	    text-transform: uppercase;
	    border: 2px solid #0e92b3;
	    text-align: center;
	    line-height: 50px;
	    border-radius: 30px;
	    cursor: pointer;
	    transition: all 1s;
	}
	
	.action .btn:hover {
	    transform: scale(1.2);
	    background-color: #0e92b3;
	}
</style>
<body>
    <div class="form">
        <div class="header">login</div>
        <div class="main">
            <div class="inpbox">
                <input type="text" placeholder="username">
            </div>
            <div class="inpbox">
                <input type="password" placeholder="password">
            </div>
        </div>
        <div class="action">
            <div class="btn">login</div>
        </div>
    </div>
</body>
</html>